<template>
    <div v-if="userInfo.roleCode === 'LEADER'">
        <div class="flex">
            <div>
                <!-- <el-image style="width: 100px; height: 100px" :src="storeForm.storeImg" fit="cover" />
                <div>
                    <div class="font-semibold">{{ storeForm.name }}</div>
                    <div>{{ storeForm.storeDesc }}</div>
                </div> -->
            </div>
            <div class="flex ml-8 text-xl">
                <div class="flex flex-col items-center justify-center w-40 p-4 mr-2 shadow-md">
                    <div class="text-2xl text-orange-700">{{ userTotal }}</div>
                    <div>社区人数</div>
                </div>
                <div class="flex flex-col items-center justify-center w-40 p-4 mr-2 shadow-md">
                    <div class="text-2xl text-orange-700">{{ farmOrderTotal }}</div>
                    <div>订单数量</div>
                </div>
                <div class="flex flex-col items-center justify-center w-40 p-4 mr-2 shadow-md">
                    <div class="text-2xl text-orange-700">{{ groupBuyTotal }}</div>
                    <div>团购数量</div>
                </div>
            </div>

        </div>
    </div>
    <div v-else-if="userInfo.roleCode === 'FARMER'">
        <div v-if="storeForm.id" class="flex">
            <div>
                <el-image style="width: 100px; height: 100px" :src="storeForm.storeImg" fit="cover" />
                <div>
                    <div class="font-semibold">{{ storeForm.name }}</div>
                    <div>{{ storeForm.storeDesc }}</div>
                </div>
            </div>
            <div class="flex ml-8 text-xl">
                <div class="flex flex-col items-center justify-center w-40 p-4 mr-2 shadow-md">
                    <div class="text-2xl text-orange-700">{{ farmGoodsTotal }}</div>
                    <div>商品数量</div>
                </div>
                <div class="flex flex-col items-center justify-center w-40 p-4 mr-2 shadow-md">
                    <div class="text-2xl text-orange-700">{{ farmOrderTotal }}</div>
                    <div>订单数量</div>
                </div>
                <div class="flex flex-col items-center justify-center w-40 p-4 mr-2 shadow-md">
                    <div class="text-2xl text-orange-700">{{ incomeTotal }}</div>
                    <div>总收入</div>
                </div>

            </div>

        </div>
        <div v-else>
            <el-button @click="openDialog" type="primary">创建店铺</el-button>
        </div>
    </div>
    <div v-else-if="userInfo.roleCode === 'ADMIN'">
        各种数量
    </div>

    <CustomTable v-if="userInfo.roleCode === 'FARMER'" class="mt-4" :data="tableData" :total="tableTotal"
        v-model:page-size="pageSize" @pageSize="getIncomeRecords" v-model:currentPage="pageNum"
        @currentPage="getIncomeRecords">
        <el-table-column type="index" width="60" label="序号" />
        <el-table-column prop="orderNo" label="订单编号">
        </el-table-column>
        <el-table-column prop="orderTime" label="订单时间" />
        <el-table-column prop="buyUserName" label="客户" />
        <el-table-column prop="earnPrice" label="收入" />
    </CustomTable>
    <CustomTable v-else-if="userInfo.roleCode === 'LEADER'" class="mt-4" hidePagination :data="tableData"
        :total="tableTotal" v-model:page-size="pageSize" @pageSize="getIncomeRecords" v-model:currentPage="pageNum"
        @currentPage="getIncomeRecords">
        <el-table-column type="index" width="60" label="序号" />
        <el-table-column prop="orderNo" label="订单编号">
        </el-table-column>
        <el-table-column prop="orderTime" label="订单时间" />
        <el-table-column prop="orderPrice" label="下单价格" />
        <el-table-column prop="realPrice" label="实际价格" />
        <el-table-column prop="logisticsStatus" label="物流状态">
            <template #default="{ row }">
                {{ formatLogisticsStr(row.logisticsStatus) }}
            </template>
        </el-table-column>
    </CustomTable>
    <CustomDialog v-model:show="addDialog" title="新增店铺" width="600px" @cancel="cancelDialog" @confirm="submitForm">
        <el-form ref="formRef" :model="shopForm" label-width="auto">
            <el-form-item label="店铺名称" prop="name">
                <el-input v-model="shopForm.name"></el-input>
            </el-form-item>
            <el-form-item label="店铺图片" prop="storeImg">
                <SingleUpload v-model="shopForm.storeImg"></SingleUpload>
            </el-form-item>
            <el-form-item label="店铺描述" prop="storeDesc"><el-input
                    v-model="shopForm.storeDesc"></el-input></el-form-item>
        </el-form>
    </CustomDialog>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { getStoreByUser, addStore, getMovieList } from '@/apis/goods'
import { getAllIncome, getIncomeInfo } from '@/apis/system'
import CustomDialog from '@/components/CustomDialog.vue'
import CustomTable from '@/components/CustomTable.vue'
import SingleUpload from '@/components/SingleUpload.vue'
import { setStoreId, getUserInfo, getStoreId } from '@/utils/store'
// import { getFarmOrderList, getLeaderOrderList } from '@/apis/order'
// import { getTenantList, getTenantUserList } from '@/apis/article'
// import { getGroupRuleList } from '@/apis/banner'
const userInfo = getUserInfo()
const storeForm = reactive({
    id: null,
    name: '',
    storeImg: '',
    storeDesc: ''
})
const profileForm = reactive({
    username: '',
    name: '',
    headUrl: '',
    storeName: ''
})
const getStore = async () => {
    const res = await getStoreByUser()
    console.log(res)
    if (res) {
        Object.assign(storeForm, res)
        setStoreId(res.id)
    }
}
const addDialog = ref(false)
const openDialog = () => {
    addDialog.value = true
}
const cancelDialog = () => {
    addDialog.value = false
}
const submitForm = async () => {
    await addStore(shopForm)
    addDialog.value = false
    getStore()
}

const shopForm = reactive({
    name: '',
    storeDesc: '',
    storeImg: ''
})
const formatLogisticsStr = (val) => {
    // 物流状态1待取货2配送中3已送达
    switch (val) {
        case 1:
            return '待取货'
        case 2:
            return '配送中'
        case 3:
            return '已送达'
        default:
            break;
    }
}
const tableData = ref()
const tableTotal = ref(0)
const pageSize = ref(10)
const pageNum = ref(1)
const getIncomeRecords = async () => {
    const res = await getAllIncome({
        pageSize: pageSize.value,
        pageNum: pageNum.value
    })
    tableData.value = res.list
    tableTotal.value = res.total
}
const incomeTotal = ref(0)
const farmGoodsTotal = ref(0)
const farmOrderTotal = ref(0)
const getIncome = async () => {
    const res = await getIncomeInfo()
    incomeTotal.value = res.totalPrice
}
const getFarmGoodsList = async () => {
    const storeId = getStoreId()
    if (storeId) {
        const res = await getGoodsList({
            pageNum: pageNum.value,
            pageSize: pageSize.value,
            storeId: getStoreId(),
            goodsName: ''
        })
        farmGoodsTotal.value = res.total
    }

}

const getOrderList = async () => {
    if (userInfo.roleCode === 'LEADER') {
        const res = await getLeaderOrderList({
            pageNum: 1,
            pageSize: 1000
        })
        farmOrderTotal.value = res.total
        tableData.value = res.list
        tableTotal.value = res.total

    } else if (userInfo.roleCode === 'FARMER') {
        const res = await getFarmOrderList({
            pageNum: 1,
            pageSize: 1
        })
        farmOrderTotal.value = res.total
    }

}

const userTotal = ref(0)
// const getGroupList = async () => {
//     const res = await getTenantList()
//     console.log(res)
//     userTotal.value = res.list
// }
const getGroupUserList = async () => {
    const res = await getTenantUserList({
        pageNum: pageNum.value,
        pageSize: pageSize.value
    })
    userTotal.value = res.total
}
const groupBuyTotal = ref(0)

// const getRules = async () => {
//     const res = await getGroupRuleList({
//         pageNum: 1,
//         pageSize: 1000,
//     })
//     groupBuyTotal.value = res.total
// }
onMounted(() => {
    if (userInfo.roleCode === 'FARMER') {
        getStore()
        getIncomeRecords()
        getIncome()
        getFarmGoodsList()
        getOrderList()
    } else if (userInfo.roleCode === 'LEADER') {
        getOrderList()
        getGroupUserList()
        // getRules()
    }

})
</script>

<style scoped></style>
